<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { Situation } from '../../api/Security/index'

const tableTable: any = ref([])

const getData = async () => {
    let res = await Situation()
    tableTable.value = res.data.data.result[0]
}

onMounted(() => {
    getData()
}) 

</script>

<template>
    <div class="left-Top">
        <div class="left-Top-img">
            <span style="padding: 10px; color: aliceblue; font-size: 1.5rem; line-height: 3rem;">监控情况</span>
        </div>
        <div class="left-Top-bottom">
            <div v-for="(item, index) in tableTable" :key="index">
                <div class="left-img">
                    <img :src="item.img" style="width: 100%; height: 79%;" />
                </div>
                <div class="right-text">
                    <h3 style="color: rgba(162, 182, 255, 1);">{{ item.floor }}</h3>
                    <h3 style="color: #fff;">设备数量：{{ item.equipmentNum }}</h3>
                    <p style="color: rgba(162, 182, 255, 1);">正常设配：<span style="color: rgba(162, 182, 255, 1);">{{ item.handclapNum }}</span> 故障设备：<span style="color: rgba(162, 182, 255, 1);">{{ item.normalNum }}</span></p>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.left-Top {
    width: 28rem;
    height: 20rem;
    margin: 5rem 0 2rem 6rem;
    background-color: rgb(16, 29, 91);

    &-img {
        width: 100%;
        height: 3rem;
        background: url('../../assets/images/leftImg.png') no-repeat center center;
        background-size: 100% 100%;
    }

    &-bottom {
        width: 100%;
        height: 15rem;
        margin-top: 2rem;
        background-color: rgb(29, 46, 107);
        overflow: hidden;

        >div {
            width: 100%;
            height: 79px;
            margin-bottom: 2px;
        }
    }
}

.left-img {
    width: 100px;
    height: 100%;
    float: left;
}

.right-text {
    height: 100%;
    float: left;
    margin-left: 10px;
}
</style>